<template>
	<!-- 单图显示组件 -->
	<div-base-navigator :pageUrl="newData.pageUrl" style="background: #FFFFFF;"
		:style="{height: `${newData.height}px`}">
		<view class="div-image"
			:style="{height: `${newData.height}px`, marginLeft: `${newData.margin}px`, marginRight: `${newData.margin}px`, marginBottom: `${newData.pageSpacing}px` }"
			style="height: 100%;">
			<image :src="newData.imageUrl" style="width: 100%;" :style="[{'height':`${newData.height}px`}]"></image>
			<navigator @click.stop class="navigate" v-for="(item,index) in newData.hotConfig" :key="index"
				:url="item.pageUrl" hover-class="none"
				:style="{width:item.width+'rpx',height:item.height+'rpx', top:item.top+'px',left:item.left+'rpx'}">
			</navigator>
		</view>
	</div-base-navigator>
</template>

<script>
	const app = getApp();
	import util from '@/utils/util'
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	export default {
		name: 'basic-image',
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						pageUrl: ``,
						imageUrl: '',
						height: 100,
						pageSpacing: 0,
						padding: 0,
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
				hotConfig: []
			};
		},
		created() {
			if (this.value.hotConfig?.length) {
				let hotConfig = util.deepClone(this.value.hotConfig);
				console.log(hotConfig)
				hotConfig.forEach(item => {
					item.width = item.width * 2;
					item.height = item.height * 2;
					// item.top = item.top*2;
					item.bottom = item.bottom * 2;
					item.left = item.left * 2;
					item.right = item.right * 2;
				});
			}
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.div-image {
		position: relative;

		.navigate {
			position: absolute;
			z-index: 10;
		}
	}
</style>
